<template>
    <codemirror ref="codeEditor" 
      style="
      height: 500px;
      background-color: white;
      margin-top: 20px;
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 10px;
      overflow: hidden;
      font-size: 25px;
      outline: none !important;
      "
      :extensions="extensions"
      tabSize="4"
      placeholder="在此输入Sql语句进行查询..."
    >
    </codemirror>
</template>
 
<script>
import { Codemirror } from 'vue-codemirror';
import { sql } from "@codemirror/lang-sql";
import { oneDark } from "@codemirror/theme-one-dark";


export default {
  name: "CodeBoard",
  components: {
    Codemirror
  },
  computed: {
    extensions(){
      return [sql(), oneDark]
    },
  },
}
</script>
 
<style scoped>

</style>